@monospace: 'IBM Plex Mono', 'Source Code Pro', Consolas, 'Roboto Mono', Menlo,
  'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace;

@system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
  'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  sans-serif;

@keyframes ML__caret-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.ML__caret:after {
  content: '';
  border: none;
  border-radius: 2px;
  border-right: 2px solid var(--caret-color, var(--ML__caret-color));
  margin-right: -2px;
  position: relative;
  left: -1px;

  animation: ML__caret-blink 1.05s step-end forwards infinite;
}

.ML__text-caret:after {
  content: '';
  border: none;
  border-radius: 1px;
  border-right: 1px solid var(--caret-color, var(--ML__caret-color));
  margin-right: -1px;
  position: relative;
  left: 0;

  animation: ML__caret-blink 1.05s step-end forwards infinite;
}

.ML__latex-caret:after {
  content: '_';
  border: none;
  margin-right: 0;
  margin-right: calc(-1ex - 2px);
  position: relative;
  color: var(--caret-color, var(--ML__caret-color));

  animation: ML__caret-blink 1.05s step-end forwards infinite;
}

.ML__container {
  display: inline-flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 39px; /* Need some room for the virtual keyboard toggle */
  width: 100%;

  /* Encourage browsers to consider allocating a hardware accelerated
   layer for this element. */
  isolation: isolate;

  /* Prevent the browser from trying to interpret touch gestures in the field */
  /* "Disabling double-tap to zoom removes the need for browsers to
        delay the generation of click events when the user taps the screen." */
  touch-action: none;

  --ML__selection-background-color: hsl(var(--hue, 212), 97%, 85%);
  --ML__text-highlight-background-color: hsla(var(--hue, 212), 40%, 50%, 0.1);
  --ML__contains-highlight-background-color: hsl(var(--hue, 212), 40%, 95%);
  --ML__selection-color: currentColor;
  --ML__caret-color: hsl(var(--hue, 212), 40%, 49%);
  --ML__smart-fence-color: currentColor;
  --ML__latex-color: var(--primary, hsl(var(--hue, 212), 40%, 50%));
  --ML__correct-color: #10a000;
  --ML__incorrect-color: #a01b00;

  --ML__placeholder-color: hsl(var(--hue, 212), 40%, 49%);
}

// @media (prefers-color-scheme: dark) {
//   .ML__container {
//     --ML__selection-background-color: hsl(var(--hue, 212), 25%, 45%);
//     --ML__text-highlight-background-color: hsla(var(--hue, 212), 40%, 50%, 0.2);
//     --ML__contains-highlight-background-color: hsl(var(--hue, 212), 5%, 34%);
//     --ML__caret-color: hsl(var(--hue, 212), 60%, 69%);
//     --ML__latex-color: var(--primary, hsl(var(--hue, 212), 40%, 50%));

//     --ML__placeholder-color: hsl(var(--hue, 212), 60%, 69%);
//   }
// }

/* This is the actual field content (formula) */
.ML__content {
  display: flex;
  align-items: center;
  align-self: center;
  position: relative;
  overflow: hidden;
  padding: 2px 0 2px 1px;
  width: 100%;
}

.ML__virtual-keyboard-toggle {
  box-sizing: border-box;
  display: flex;
  align-self: center;
  align-items: center;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;

  width: 34px;
  height: 34px;
  padding: 0;
  margin-right: 4px;
  cursor: pointer;
  /* Avoid some weird blinking with :hover */
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  color: var(--primary, hsl(var(--hue, 212), 40%, 50%));
  fill: currentColor;
  background: transparent;

  &:hover {
    background: hsla(0, 0%, 70%, 0.3);
    color: #333;
    fill: currentColor;
    // border: 1px solid rgba(255, 255, 255, .5)
    // border: 1px solid rgba(255, 255, 255, .9);
    // box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    //     0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  }
  & > span {
    display: flex;
    align-self: center;
    align-items: center;
  }
}
/* The invisible element used to capture keyboard events. We're just trying
 really hard to make sure it doesn't show. */
.ML__keyboard-sink {
  display: inline-block;

  resize: none;
  outline: none;
  border: none;

  // border-radius: 16px;
  // min-width: 16px;
  // height: 16px;
  // background-color: #29c;

  /* Need these for Microsoft Edge */
  position: fixed;
  clip: rect(0 0 0 0);
  /* Need this to prevent iOS Safari from auto-zooming */
  font-size: 1em;
  font-family: KaTeX_Main;
}

.ML__focused .ML__text {
  background: var(--highlight-text, var(--ML__text-highlight-background-color));
}

/* When using smartFence, the anticipated closing fence is displayed
with this style */
.ML__smart-fence__close {
  opacity: var(--smart-fence-opacity, 0.5);
  color: var(--smart-fence-color, var(--ML__smart-fence-color));
}

.ML__focused .ML__selection {
  background: var(
    --selection-background-color-focused,
    var(--selection-background-color, var(--ML__selection-background-color))
  ) !important;
}
.ML__focused .ML__selected,
.ML__focused .ML__selected .ML__contains-caret,
.ML__focused .ML__selected .ML__smart-fence__close,
.ML__focused .ML__selected .ML__placeholder {
  color: var(
    --selection-color-focused,
    var(--selection-color, var(--ML__selection-color))
  ) !important;
}

.ML__selection {
  box-sizing: border-box;
  background: var(
    --selection-background-color,
    var(--ML__selection-background-color)
  ) !important;
}

.ML__selected,
.ML__selected .ML__contains-caret,
.ML__selected .ML__smart-fence__close,
.ML__selected .ML__placeholder {
  color: var(--selection-color, var(--ML__selection-color));
  opacity: 1;
}

.ML__contains-caret.ML__close,
.ML__contains-caret.ML__open,
.ML__contains-caret > .ML__close,
.ML__contains-caret > .ML__open,
.ML__contains-caret .ML__sqrt-sign,
.ML__contains-caret .ML__sqrt-line {
  color: var(--caret-color, var(--ML__caret-color));
}

.ML__contains-highlight {
  background: var(
    --contains-highlight-backround-color,
    var(--ML__contains-highlight)
  );
  box-sizing: border-box;
}

.ML__latex {
  font-family: @monospace;
  font-weight: 400;

  color: var(--latex-color, var(--ML__latex-color));
}

.ML__suggestion {
  opacity: 0.5;
}

.ML__virtual-keyboard-toggle.is-visible.is-pressed:hover {
  background: hsl(var(--hue, 212), 25%, 35%);
  color: #fafafa;
  fill: currentColor;
}

.ML__virtual-keyboard-toggle:focus {
  outline: none;
  border-radius: 8px;
  border: 2px solid var(--primary, hsl(var(--hue, 212), 40%, 50%));
}

.ML__virtual-keyboard-toggle.is-pressed,
.ML__virtual-keyboard-toggle.is-active:hover,
.ML__virtual-keyboard-toggle.is-active {
  background: hsl(var(--hue, 212), 25%, 35%);
  color: #fafafa;
  fill: currentColor;
}

/* This class is used to implement the `\mathtip` and `\texttip` commands
   For UI elements, see `[data-ML__tooltip]`
*/
.ML__tooltip-container {
  position: relative;
  transform: scale(0); // To override the overflow:hidden

  .ML__tooltip-content {
    position: fixed;
    display: inline-table;
    visibility: hidden;
    z-index: 2;
    width: max-content;
    max-width: 400px;
    padding: 12px 12px;
    border-radius: 8px;

    background: #616161; // Grey 700
    color: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
      0 3px 1px -2px rgba(0, 0, 0, 0.2);
    opacity: 0;
    // animation: .150s tooltipFadeOut cubic-bezier(0.4, 0.0, 1, 1) forwards;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 1, 1);

    .ML__text {
      white-space: normal; // Make text wrap
    }
    .ML__base {
      display: contents;
    }
  }
  &:hover .ML__tooltip-content {
    visibility: visible; // Visible triggers the animation...
    opacity: 1; // ... but we start fully transparent to
    // give ourselves a delay before showing
    font-size: 0.75em;
    transform: scale(1) translate(0, 3em);
  }
}

/* Add an attribute 'data-ML__tooltip' to automatically show a
   tooltip over a element on hover.
   Use 'data-position="top"' to place the tooltip above the
   element rather than below.
   Use 'data-delay' to delay the triggering of the tooltip.
*/
[data-ML__tooltip] {
  position: relative;
  &[data-placement='top']::after {
    top: inherit;
    bottom: 100%;
  }
  &::after {
    content: attr(data-ML__tooltip);
    position: absolute;
    display: none;
    z-index: 2;

    right: 110%;
    left: calc(100% + 8px);
    width: max-content;
    max-width: 200px;
    padding: 8px 8px;
    border-radius: 2px;

    background: #616161; // Grey 700
    color: #fff;

    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
      0 3px 1px -2px rgba(0, 0, 0, 0.2);

    text-align: center;
    font-family: @system;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;

    /* Phone */
    @media only screen and (max-width: 767px) {
      padding: 8px 16px;
      font-size: 16px;
    }

    opacity: 0;
    transform: scale(0.5);
    // animation: .150s tooltipFadeOut cubic-bezier(0.4, 0.0, 1, 1) forwards;
    transition: all 0.15s cubic-bezier(0.4, 0, 1, 1);
  }
}

:not(.tracking) [data-ML__tooltip]:hover {
  position: relative;
  &::after {
    visibility: visible; // Visible triggers the animation...
    display: inline-table;
    opacity: 1; // ... but we start fully transparent to
    // give ourselves a delay before showing
    transform: scale(1);
  }
}

[data-ML__tooltip][data-delay]::after {
  // On fade out, we don't want a delay
  transition-delay: 0s;
}
[data-ML__tooltip][data-delay]:hover::after {
  // But we do want a delay on fade in
  transition-delay: 1s; /* attr(data-delay); Should work. But doesn't. */
}
